<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '修改支付密码',
  },
}
</route>

<template>
  <view class="password">
    <view class="password-box">
      <!-- 旧支付密码输入 -->
      <view class="item">
        <text class="item-lable">旧支付密码</text>
        <view class="item-content">
          <wd-input
            class="password-input"
            type="number"
            :maxlength="6"
            show-password
            placeholder="请输入6位数字旧支付密码"
            v-model="oldPassword"
          />
          <wd-icon
            :name="showOldPwd ? 'eye-close' : 'eye'"
            @click="showOldPwd = !showOldPwd"
            class="eye-icon"
          />
        </view>
      </view>

      <!-- 新支付密码输入 -->
      <view class="item">
        <text class="item-lable">新支付密码</text>
        <view class="item-content">
          <wd-input
            class="password-input"
            type="number"
            :maxlength="6"
            show-password
            placeholder="请输入6位数字新支付密码"
            v-model="newPassword"
          />
          <wd-icon
            :name="showNewPwd ? 'eye-close' : 'eye'"
            @click="showNewPwd = !showNewPwd"
            class="eye-icon"
          />
        </view>
      </view>

      <!-- 确认支付密码 -->
      <view class="item">
        <text class="item-lable">确认支付密码</text>
        <view class="item-content">
          <wd-input
            class="password-input"
            type="number"
            :maxlength="6"
            show-password
            placeholder="请再次输入新支付密码"
            v-model="confirmPassword"
          />
          <wd-icon
            :name="showConfirmPwd ? 'eye-close' : 'eye'"
            @click="showConfirmPwd = !showConfirmPwd"
            class="eye-icon"
          />
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <wd-button
      :custom-class="isActive ? 'custom-shadow' : 'custom-shadow isDisabled'"
      block
      @click="submitPassword"
    >
      确认修改
    </wd-button>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { payPasswordSet } from '@/service/user/info'
import { useToast } from 'wot-design-uni'

const toast = useToast()

const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const isActive = ref(false)
const showOldPwd = ref(false)
const showNewPwd = ref(false)
const showConfirmPwd = ref(false)

const validatePassword = () => {
  // 验证6位纯数字
  return /^\d{6}$/.test(newPassword.value)
}

const submitPassword = async () => {
  if (!oldPassword.value) return toast.show('请输入旧支付密码')
  if (!validatePassword()) return toast.show('支付密码需6位纯数字')
  if (newPassword.value !== confirmPassword.value) return toast.show('两次输入密码不一致')

  try {
    toast.loading('提交中...')
    const res = await payPasswordSet({
      oldPassword: oldPassword.value,
      newPassword: newPassword.value,
    })

    if (res.code === 200) {
      toast.show('支付密码修改成功')
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      toast.show(res.message || '修改失败')
    }
  } catch (error) {
    toast.show('请求异常')
  } finally {
    toast.close()
  }
}

watch([oldPassword, newPassword, confirmPassword], ([oldPwd, newPwd, confirmPwd]) => {
  isActive.value = !!oldPwd && validatePassword() && newPwd === confirmPwd
})
</script>

<style lang="scss" scoped>
.password {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;

  .password-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680rpx;
    padding: 20rpx;
    margin-bottom: 15rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .item-lable {
        width: 160rpx;
        font-size: 24rpx;
        color: #333;
      }

      .item-content {
        position: relative;
        display: flex;
        align-items: center;
        width: 540rpx;
        padding: 10rpx 0;
        line-height: 1.5;

        .password-input {
          flex: 1;
          padding-right: 20rpx;
          font-size: 28rpx;
        }

        .eye-icon {
          padding: 10rpx;
          font-size: 32rpx;
          color: #999;
        }
      }

      &:last-child .item-content::before {
        content: none;
      }
    }
  }

  :deep() {
    .custom-shadow {
      width: 680rpx;
      margin-top: 40rpx;
      font-size: 32rpx;
      color: #fff;
      background: $uni-bg-themes;
      border-radius: 50rpx;

      &.isDisabled {
        opacity: 0.6;
      }
    }
  }
}
</style>
